<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>置顶效果</title>
<style>
    body{
        background-color: lightblue;
        height: 1500px;
        }
     .content{
         width: 15px;
         height: 120px;
         position: absolute;
         top:calc(50% - 60px);
         right: 0px;
         position: fixed;
     }
     #pic1,#pic2{
         width: 120px;
         height: 40px;
         line-height: 30px;
         text-align: center;
         position: absolute;
         color: white;
         right: 0px;
         border-top-left-radius: 30px;
         border-bottom-left-radius: 30px;
     }
     #pic1{
         background-color: #d03f42;
         margin-top: -124px;
         /*display: none;*/
         opacity: 0;
       }
     #pic2{
         background-color: #383838;
         margin-top: -40px;
         /*display: none;*/
         opacity: 0;
         }
</style>
</head>
<body>
    <section class="content">
        <img src="scroll.png" alt="">
       <div id="pic1">返回顶部</div>
       <div id="pic2">转到底部</div>
    </section>
</body>
<html>
<script>
$(function(){
    //给div绑定鼠标事件 
     $('div').hover(function(){
        $(this).animate({opacity:1});
    },function(){
        $(this).animate({opacity:0});
    });
   $('#pic1').click(function(){
       $(document).scrollTop(0);
   });
   $('#pic2').click(function(){
       $(document).scrollTop($(document).height());
   })
});

</script>